import React, { useState, useEffect, useRef } from 'react';
import './MessageBubble.css';
import { useTheme } from '../theme';

/**
 * 流式消息组件
 * 用于显示实时流式响应
 */
const StreamingMessage = ({ content, isComplete, timestamp }) => {
  const [displayContent, setDisplayContent] = useState('');
  const [isVisible, setIsVisible] = useState(true);
  const contentRef = useRef(null);
  const { activeTheme } = useTheme();
  
  // 当内容更新时，更新显示内容
  useEffect(() => {
    if (content) {
      setDisplayContent(content);
      setIsVisible(true);
    }
  }, [content]);
  
  // 当完成状态变更时处理可见性
  useEffect(() => {
    if (isComplete) {
      // 如果消息完成，准备淡出
      const timer = setTimeout(() => {
        setIsVisible(false);
      }, 100);
      return () => clearTimeout(timer);
    }
  }, [isComplete]);
  
  // 自动滚动到底部
  useEffect(() => {
    if (contentRef.current) {
      contentRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' });
    }
  }, [displayContent]);
  
  /**
   * 格式化消息内容（简化版）
   * 由于流式数据可能是不完整的Markdown，简化处理以提高性能
   */
  const formatStreamingContent = (text) => {
    if (!text || typeof text !== 'string') {
      return <span>Loading...</span>;
    }
    
    // 检测是否有代码块
    const hasCodeBlock = text.includes('```');
    
    // 如果有代码块，使用更简单的格式化方式
    if (hasCodeBlock) {
      // 简单的代码块检测
      const parts = text.split(/(```[\s\S]*?(?:```|$))/g);
      
      return parts.map((part, index) => {
        if (part.startsWith('```')) {
          // 处理可能未闭合的代码块
          const closing = part.endsWith('```') ? -3 : undefined;
          const code = closing ? part.slice(3, closing) : part.slice(3);
          
          return (
            <pre key={index} className="code-block">
              <code>{code}</code>
            </pre>
          );
        }
        
        // 处理普通文本，至少保留换行
        return (
          <span key={index}>
            {part.split('\n').map((line, i) => (
              <React.Fragment key={i}>
                {line}
                {i < part.split('\n').length - 1 && <br />}
              </React.Fragment>
            ))}
          </span>
        );
      });
    }
    
    // 如果没有代码块，只做基本文本处理（保留换行）
    return text.split('\n').map((line, i) => (
      <React.Fragment key={i}>
        {line}
        {i < text.split('\n').length - 1 && <br />}
      </React.Fragment>
    ));
  };
  
  // 如果消息不可见且已完成，不渲染组件
  if (!isVisible && isComplete) return null;
  
  return (
    <div className={`message-bubble bot-message ${activeTheme === 'dark' ? 'dark' : 'light'} streaming ${isComplete ? 'complete' : ''}`}>
      <div className="message-content" ref={contentRef}>
        {formatStreamingContent(displayContent)}
        {!isComplete && <span className="cursor"></span>}
      </div>
      {timestamp && <div className="message-timestamp">{timestamp}</div>}
    </div>
  );
};

export default StreamingMessage; 